<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>HTML5 History 模式 | Vue Router</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="static/picture/logo.png">
    <link rel="apple-touch-icon" href="https://v3.router.vuejs.org/icons/apple-touch-icon-152x152.png">
    <link rel="mask-icon" href="https://v3.router.vuejs.org/icons/safari-pinned-tab.svg" color="#3eaf7c">
    <meta name="description" content="Vue.js 官方的路由管理器。">
    <meta name="wwads-cn-verify" content="7e7757b1e12abcb736ab9a754ffb617a">
    <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
    
    <link rel="preload" href="static/css/0.styles.136ede33.css" as="style"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/app.5cb068d1.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/4.1430b5a5.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/3.51f41756.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/117.520112d7.js" as="script"><link rel="preload" href="https://v3.router.vuejs.org/assets/js/7.b1ef01fe.js" as="script"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/10.31570374.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/100.f5a92b3f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/101.ee7125f5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/102.d6663468.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/103.52eae1a0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/104.c3f7f210.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/105.eeea8ced.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/106.1c26feed.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/107.45f15a23.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/108.67b3498d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/109.0d861fad.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/11.23ce75fe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/110.817be425.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/111.1ff37cf8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/112.0f4bcc2b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/113.33f197d8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/114.59d11efc.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/115.e29513c5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/116.d3be25ed.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/118.4e8860bf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/119.822915fe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/12.f9f5c1d4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/120.64de5730.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/121.d14483d6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/122.809b1d6c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/123.dfafa172.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/124.e1cdb337.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/125.093b479c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/13.db1acc91.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/14.17c88755.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/15.6700843a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/16.84949dd1.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/17.8f87f2ef.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/18.90f9825b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/19.196286e9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/20.8a2eefe0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/21.9e49382e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/22.0bdc0b6f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/23.83b61690.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/24.445c95b4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/25.40493d84.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/26.2a95a52d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/27.1856a4c3.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/28.9f6e959e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/29.06df98c9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/30.be9a3758.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/31.2751df13.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/32.3df6388b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/33.73d91d13.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/34.42fa6d43.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/35.92c4dbe0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/36.3cb64f0d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/37.d00b8ad5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/38.8cfdc40e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/39.663f424b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/40.d5721761.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/41.0dd61abe.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/42.d09ca009.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/43.539e190a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/44.7907e586.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/45.273a044f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/46.8680fbf0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/47.f68a4eb9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/48.3616928b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/49.bf7cdfd5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/5.2d9bb619.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/50.ec7d6bdf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/51.6c2151bf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/52.b853c8bc.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/53.14dd74fd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/54.63232eeb.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/55.9582f69a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/56.4b1cd6ef.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/57.a027b996.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/58.07b675b0.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/59.bb8da942.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/6.02bc56cd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/60.67d68613.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/61.f5eb4a0d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/62.d0da6098.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/63.c3bfaec4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/64.56511c8c.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/65.b0d60684.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/66.e066bc4d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/67.fdc123f4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/68.b78eaac4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/69.ab78abab.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/70.6ca6222a.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/71.442171e5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/72.12cba91d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/73.258ad65e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/74.42a25693.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/75.dcf907be.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/76.39d8dfc2.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/77.ef3ec9f9.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/78.4c82cfbf.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/79.b5d92855.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/8.dee4ab51.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/80.d55e87d6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/81.cf409eab.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/82.fd3a33a6.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/83.0e5cf847.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/84.28b2a6b8.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/85.3a729073.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/86.c985b80b.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/87.62964e61.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/88.ceb8b07d.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/89.2c0b86ae.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/9.a79fac11.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/90.b80f9f69.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/91.ecc4a957.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/92.2165392e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/93.de463e4e.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/94.b595fcb4.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/95.5eb09d5f.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/96.221390cd.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/97.4daa1cf5.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/98.860a2ac1.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/99.33c3adae.js"><link rel="prefetch" href="https://v3.router.vuejs.org/assets/js/vendors~docsearch.2dc030f4.js">
    <link rel="stylesheet" href="static/css/0.styles.136ede33.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="main-container" data-v-84121532=""><div class="theme-container" data-v-84121532=""><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewbox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="index4.html" class="home-link router-link-active"><!----> <span class="site-name">Vue Router</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="index10.html" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="index11.html" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="v3.x" class="dropdown-title"><span class="title">v3.x</span> <span class="arrow down"></span></button> <button type="button" aria-label="v3.x" class="mobile-dropdown-title"><span class="title">v3.x</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index1.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  v4.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  日本語
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Русский
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  한국어
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Français
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="index10.html" class="nav-link router-link-active">
  指南
</a></div><div class="nav-item"><a href="index11.html" class="nav-link">
  API 参考
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="v3.x" class="dropdown-title"><span class="title">v3.x</span> <span class="arrow down"></span></button> <button type="button" aria-label="v3.x" class="mobile-dropdown-title"><span class="title">v3.x</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="index1.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  v4.x
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="javascript:;" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新记录
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">选择语言</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">选择语言</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  English
</a></li><li class="dropdown-item"><!----> <a href="" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  简体中文
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  日本語
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Русский
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  한국어
</a></li><li class="dropdown-item"><!----> <a href="javascript:;" class="nav-link">
  Français
</a></li></ul></div></div> <a href="javascript:;" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <div class="sponsors sponsors-top" data-v-84121532=""><span data-v-84121532="">Platinum Sponsors</span> <a href="javascript:;" target="_blank" rel="noopener" data-v-84121532=""><img src="https://posva-sponsors.pages.dev/logos/fincliplogo_black_svg.svg" alt="Finogeeks" data-v-84121532=""></a></div> <ul class="sidebar-links"><li><a href="installation2.html" class="sidebar-link">安装</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>基础</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="index10.html" aria-current="page" class="sidebar-link">起步</a></li><li><a href="dynamic-matching2.html" class="sidebar-link">动态路由匹配</a></li><li><a href="nested-routes2.html" class="sidebar-link">嵌套路由</a></li><li><a href="navigation2.html" class="sidebar-link">编程式的导航</a></li><li><a href="named-routes2.html" class="sidebar-link">命名路由</a></li><li><a href="named-views2.html" class="sidebar-link">命名视图</a></li><li><a href="redirect-and-alias2.html" class="sidebar-link">重定向和别名</a></li><li><a href="passing-props2.html" class="sidebar-link">路由组件传参</a></li><li><a href="" aria-current="page" class="active sidebar-link">HTML5 History 模式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="#后端配置例子" class="sidebar-link">后端配置例子</a></li><li class="sidebar-sub-header"><a href="#警告" class="sidebar-link">警告</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>进阶</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="navigation-guards2.html" class="sidebar-link">导航守卫</a></li><li><a href="meta2.html" class="sidebar-link">路由元信息</a></li><li><a href="transitions2.html" class="sidebar-link">过渡动效</a></li><li><a href="data-fetching2.html" class="sidebar-link">数据获取</a></li><li><a href="scroll-behavior2.html" class="sidebar-link">滚动行为</a></li><li><a href="lazy-loading2.html" class="sidebar-link">路由懒加载</a></li><li><a href="navigation-failures2.html" class="sidebar-link">导航故障</a></li></ul></section></li></ul> <div class="sponsors" data-v-84121532=""><span data-v-84121532="">Sponsors</span> <a href="javascript:;" target="_blank" rel="noopener" data-v-84121532=""><img src="https://posva-sponsors.pages.dev/logos/vuejobs.svg" alt="VueJobs" data-v-84121532=""></a></div></aside> <main class="page"><div class="carbon-ads" data-v-84121532=""></div> <div class="theme-default-content content__default"><h1 id="html5-history-模式"><a href="#html5-history-模式" class="header-anchor">#</a> HTML5 History 模式</h1> <p><code>vue-router</code> 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。</p> <p>如果不想要很丑的 hash，我们可以用路由的 <strong>history 模式</strong>，这种模式充分利用 <code>history.pushState</code> API 来完成 URL 跳转而无须重新加载页面。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>当你使用 history 模式时，URL 就像正常的 url，例如 <code>http://yoursite.com/user/id</code>，也好看！</p> <p>不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 <code>http://oursite.com/user/id</code> 就会返回 404，这就不好看了。</p> <p>所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 <code>index.html</code> 页面，这个页面就是你 app 依赖的页面。</p> <h2 id="后端配置例子"><a href="#后端配置例子" class="header-anchor">#</a> 后端配置例子</h2> <p><strong>注意</strong>：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue CLI 的 <code>publicPath</code> 选项<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 和相关的 <a href="index3.html#base" target="_blank" rel="noopener noreferrer">router <code>base</code> property<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。你还需要把下列示例中的根目录调整成为子目录 (例如用 <code>RewriteBase /name-of-your-subfolder/</code> 替换掉 <code>RewriteBase /</code>)。</p> <h4 id="apache"><a href="#apache" class="header-anchor">#</a> Apache</h4> <div class="language-apache extra-class"><pre class="language-text"><code>&lt;IfModule mod_rewrite.c&gt;
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
&lt;/IfModule&gt;
</code></pre></div><p>除了 <code>mod_rewrite</code>，你也可以使用 <a href="javascript:;" target="_blank" rel="noopener noreferrer"><code>FallbackResource</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h4 id="nginx"><a href="#nginx" class="header-anchor">#</a> nginx</h4> <div class="language-nginx extra-class"><pre class="language-nginx"><code><span class="token directive"><span class="token keyword">location</span> /</span> <span class="token punctuation">{</span>
  <span class="token directive"><span class="token keyword">try_files</span> <span class="token variable">$uri</span> <span class="token variable">$uri</span>/ /index.html</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="原生-node-js"><a href="#原生-node-js" class="header-anchor">#</a> 原生 Node.js</h4> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> http <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'http'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> httpPort <span class="token operator">=</span> <span class="token number">80</span>

http<span class="token punctuation">.</span><span class="token function">createServer</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  fs<span class="token punctuation">.</span><span class="token function">readFile</span><span class="token punctuation">(</span><span class="token string">'index.html'</span><span class="token punctuation">,</span> <span class="token string">'utf-8'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> content</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'We cannot open &quot;index.html&quot; file.'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>

    res<span class="token punctuation">.</span><span class="token function">writeHead</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
      <span class="token string-property property">'Content-Type'</span><span class="token operator">:</span> <span class="token string">'text/html; charset=utf-8'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>

    res<span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span>content<span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">listen</span><span class="token punctuation">(</span>httpPort<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Server listening on: http://localhost:%s'</span><span class="token punctuation">,</span> httpPort<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><h4 id="基于-node-js-的-express"><a href="#基于-node-js-的-express" class="header-anchor">#</a> 基于 Node.js 的 Express</h4> <p>对于 Node.js/Express，请考虑使用 <a href="javascript:;" target="_blank" rel="noopener noreferrer">connect-history-api-fallback 中间件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h4 id="internet-information-services-iis"><a href="#internet-information-services-iis" class="header-anchor">#</a> Internet Information Services (IIS)</h4> <ol><li>安装 <a href="javascript:;" target="_blank" rel="noopener noreferrer">IIS UrlRewrite<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li>在你的网站根目录中创建一个 <code>web.config</code> 文件，内容如下：</li></ol> <div class="language-xml extra-class"><pre class="language-xml"><code><span class="token prolog">&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>configuration</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>system.webServer</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rewrite</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rules</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>rule</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Handle History Mode and custom 404/500<span class="token punctuation">&quot;</span></span> <span class="token attr-name">stopProcessing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>match</span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>(.*)<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>conditions</span> <span class="token attr-name">logicalGrouping</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>MatchAll<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>add</span> <span class="token attr-name">input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{REQUEST_FILENAME}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">matchType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IsFile<span class="token punctuation">&quot;</span></span> <span class="token attr-name">negate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>add</span> <span class="token attr-name">input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>{REQUEST_FILENAME}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">matchType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>IsDirectory<span class="token punctuation">&quot;</span></span> <span class="token attr-name">negate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>true<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>conditions</span><span class="token punctuation">&gt;</span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>action</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>Rewrite<span class="token punctuation">&quot;</span></span> <span class="token attr-name">url</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>/<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rule</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rules</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>rewrite</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>system.webServer</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>configuration</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="caddy"><a href="#caddy" class="header-anchor">#</a> Caddy</h4> <div class="language- extra-class"><pre class="language-text"><code>rewrite {
    regexp .*
    to {path} /
}
</code></pre></div><h4 id="firebase-主机"><a href="#firebase-主机" class="header-anchor">#</a> Firebase 主机</h4> <p>在你的 <code>firebase.json</code> 中加入：</p> <div class="language- extra-class"><pre class="language-text"><code>{
  &quot;hosting&quot;: {
    &quot;public&quot;: &quot;dist&quot;,
    &quot;rewrites&quot;: [
      {
        &quot;source&quot;: &quot;**&quot;,
        &quot;destination&quot;: &quot;/index.html&quot;
      }
    ]
  }
}
</code></pre></div><h2 id="警告"><a href="#警告" class="header-anchor">#</a> 警告</h2> <p>给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 <code>index.html</code> 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后再给出一个 404 页面。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">mode</span><span class="token operator">:</span> <span class="token string">'history'</span><span class="token punctuation">,</span>
  <span class="token literal-property property">routes</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'*'</span><span class="token punctuation">,</span> <span class="token literal-property property">component</span><span class="token operator">:</span> NotFoundComponent <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅 <a href="javascript:;" target="_blank" rel="noopener noreferrer">Vue 服务端渲染文档<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="passing-props2.html" class="prev">
        路由组件传参
      </a></span> <span class="next"><a href="navigation-guards2.html">
        导航守卫
      </a>
      →
    </span></p></div> <div class="bsa-cpc-wrapper" data-v-84121532=""><div class="bsa-cpc"></div></div></main></div></div><div class="global-ui"><!----></div></div>
    <script src="static/js/app.5cb068d1.js" defer=""></script><script src="static/js/4.1430b5a5.js" defer=""></script><script src="static/js/3.51f41756.js" defer=""></script><script src="static/js/117.520112d7.js" defer=""></script><script src="static/js/7.b1ef01fe.js" defer=""></script>
  </body>
</html>
